import { useState } from 'react';
import { Button, Col, Modal } from 'antd';

const AdminButton = (obj: any) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Col className="gutter-row" span={6}>
        <Button
          type="primary"
          onClick={showModal}
          style={{ width: "200px", height: "60px", backgroundColor: obj.color }}
        >
          {obj.name}
        </Button>
      </Col>
      <Modal
        title={obj.name}
        open={isModalOpen}
        onOk={handleOk}
        footer={null}
        onCancel={handleCancel}
        width={1200}
        style={{ margin: "auto", width: "1000px" }}
      >
        {obj.children}
      </Modal>
    </>
  );
};
  
  export default AdminButton;